<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        height: 200vh;

        overflow: scroll;
      }

      img {
        width: 200px;
        height: 200px;
        margin-top: 1200px;
      }
    </style>
  </head>

  <body>
    <img id="img" src="./images/1734618294816.jpg" alt="" />
  </body>
  <script>
    /*
        性能优化原则
    1.多使用内存、缓存或其他方法
    2.减少CPU计算量，减少网络加载耗时
    （适用于所有编程的性能优化----空间换时间）

    从何入手
让加载更快
1.减少资源体积：压缩代码
2.减少访问次数：合并代码，SSR服务端渲染，缓存 （雪碧图）
3.使用更快的网络：CDN
让渲染更快
1.CSS放在head，JS放在body最下面
2.尽早开始执行JS，用DOMContentLoaded事件代替window.onload事件
3.懒加载（图片懒加载，上滑加载更多）
4.对DOM查询进行缓存
5.频繁DOM操作，合并到一起插入DOM结构 
6.节流throttle 防抖debounce
7.减少重绘和回流



 缓存
 1.静态资源加hash后缀，根据文件内容计算hash
 2.文件内容不变，则hash不变，则url不变
 3.url和文件不变，则会自动触发http缓存机制，返回304

 SSR
 1.服务器端渲染：将网页和数据一起加载，一起渲染
 2.非SSR（前后端分离）：先加载网页，再加载数据，再渲染数据
 3.早先的JSP ASP PHP等技术，都是服务器端渲染的代表, 现在的React Vue Angular都有SSR的实现
    */
    let img = document.getElementById("img");
    const observer = new IntersectionObserver(
      (e) => {
        console.log(e, "e");
      },
      {
        root: null,
      }
    );
    observer.observe(img);
  </script>
</html>
